<template>
  <div class="login-container">
    <div class="logo"></div>
    <div class="form">
      <h1>Center Monitoring System</h1>
      <div class="line"></div>
      <div class="input-form" style="margin-top: 0">
        <span>Email</span>
        <div class="username-icon"></div>
        <input v-model="username" class="input" />
      </div>
      <div class="input-form">
        <span>Password</span>
        <div class="password-icon"></div>
        <input v-model="password" type="password" class="input" @keyup.enter="submit"/>
      </div>
      <div class="input-form">
        <button style="cursor:pointer;" @click="submit">Login</button>
      </div>

      <!-- <div class="input-form">
        <span>验证码</span>
        <input style="padding-right:10vw" v-model="code" class="input code" />
      </div> -->
    </div>
  </div>
</template>

<script>
import API from "api";
import MD5 from "md5";
import router from "../router/index.js";
import { reactive, toRefs, onBeforeMount } from "vue";
export default {
  setup() {
    let state = reactive({
      username: localStorage.getItem("user") || "",
      password: ''
    });
    const submit = () => {
      let md5_password = MD5(state.password)
      API.login({
        username: state.username,
        password: md5_password,
      }).then((res) => {
        if (res.code != 0) {
          state.password = ''
          alert('wrong email or password'); // todo 替换好看的提示窗
          return;
        }
        window.localStorage.setItem("user_id", res.data.id)
        window.localStorage.setItem("auth_token", res.data.token)
        setTimeout(() => {
          window.location.href = '/'
          return
        }, 500);
      });
    }
    // onBeforeMount(() => {
    //   let auth_token = window.localStorage.getItem('auth_token') || ''
    //         if (auth_token != '') {
    //           window.location.href = '/'
    //           return
    //         }
    //     });
    return {
      submit,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1;
  // background: #000;
  // background: url("https://qiniu.change90.com/cms/img/background.jpeg");
  background: url("https://cms.wifigsmalarm.com/background.jpeg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .logo {
    top: 16vh;
    left: 7vw;
    width: 30vw;
    height: 8vh;
    position: fixed;
    z-index: 1;
    // background: url("http://img.smartfacade.com.cn/mzm/public/images/logo.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .form {
    position: absolute;
    top: 30vh;
    width: 28vw;
    left: 7vw;
    h1 {
      float: left;
      color: #fff;
      font-weight: 500;
      font-size: 1.8rem;
      font-family: PingFangSC-Medium, PingFang SC;
    }
    .line {
      width: 100%;
      height: 2px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      margin-top: 8vh;
    }
    .input-form {
      margin-top: 4vh;
      span {
        width: 6vw;
        position: absolute;
        margin-top: 7vh;
        margin-left: 1vw;
        text-align: left;
        font-size: 1.1rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.85);
        line-height: 1.5rem;
        letter-spacing: 2px;
      }
      .username-icon {
        position: absolute;
        // background: url("http://img.smartfacade.com.cn/mzm/public/icon/common/username.png");
        width: 4rem;
        height: 4rem;
        right: 0;
        background-size: 50% 50%;
        margin-top: 6.5vh;
        background-repeat: no-repeat;
      }
      .password-icon {
        position: absolute;
        // background: url("http://img.smartfacade.com.cn/mzm/public/icon/common/password.png");
        width: 4rem;
        height: 4rem;
        right: 0;
        background-size: 50% 50%;
        margin-top: 6.5vh;
        background-repeat: no-repeat;
      }
      button {
        width: 11vw;
        height: 6vh;
        background: none;
        color: #fff;
        float: left;
        margin-top: 4vh;
        border-radius: 4px;
        border: 2px solid #175da8;
        &:hover{
          background: #175da8;
        }
      }
      input {
        color: rgba(255, 255, 255, 0.3);
        margin-top: 5vh;
        width: 100%;
        background: none;
        border-radius: 4px;
        border: 1px solid rgba(178, 178, 178, 0.35);
        font-size: 1.8rem;
        height: 4rem;
        padding-left: 7vw;
        padding-right: 5vw;
        .first {
          margin-top: 3vh !important;
        }
        .code {
          padding-right: 10vw;
        }
      }
    }
  }
}
</style>
